<template>
  <view class="keyBoardContainer" v-if="showKeyBoard">
    <view>
      <text class="clearInput handleBtn" @click="clearInput">清空</text>
      <text class="complete handleBtn" @click="inputComplete">完成</text>
      <view class="keyboard">
        <view v-if="showCNKeyBoard" class="keyboard_content">
          <text @click="onKeyBoardPress" data-text="京">京</text>
          <text @click="onKeyBoardPress" data-text="津">津</text>
          <text @click="onKeyBoardPress" data-text="冀">冀</text>
          <text @click="onKeyBoardPress" data-text="鲁">鲁</text>
          <text @click="onKeyBoardPress" data-text="晋">晋</text>
          <text @click="onKeyBoardPress" data-text="蒙">蒙</text>
          <text @click="onKeyBoardPress" data-text="辽">辽</text>
          <text @click="onKeyBoardPress" data-text="吉">吉</text>
          <text @click="onKeyBoardPress" data-text="黑">黑</text>
          <text @click="onKeyBoardPress" data-text="沪">沪</text>
          <text @click="onKeyBoardPress" data-text="苏">苏</text>
          <text @click="onKeyBoardPress" data-text="浙">浙</text>
          <text @click="onKeyBoardPress" data-text="皖">皖</text>
          <text @click="onKeyBoardPress" data-text="闽">闽</text>
          <text @click="onKeyBoardPress" data-text="赣">赣</text>
          <text @click="onKeyBoardPress" data-text="豫">豫</text>
          <text @click="onKeyBoardPress" data-text="鄂">鄂</text>
          <text @click="onKeyBoardPress" data-text="湘">湘</text>
          <text @click="onKeyBoardPress" data-text="粤">粤</text>
          <text @click="onKeyBoardPress" data-text="桂">桂</text>
          <text @click="onKeyBoardPress" data-text="渝">渝</text>
          <text @click="onKeyBoardPress" data-text="川">川</text>
          <text @click="onKeyBoardPress" data-text="贵">贵</text>
          <text @click="onKeyBoardPress" data-text="云">云</text>
          <text @click="onKeyBoardPress" data-text="藏">藏</text>
          <text @click="onKeyBoardPress" data-text="陕">陕</text>
          <text @click="onKeyBoardPress" data-text="甘">甘</text>
          <text @click="onKeyBoardPress" data-text="青">青</text>
          <text @click="onKeyBoardPress" data-text="琼">琼</text>
          <text @click="onKeyBoardPress" data-text="新">新</text>
          <text class="normalWidth change" @click="changeKeyBoard">ABC</text>
          <text @click="onKeyBoardPress" data-text="宁">宁</text>
          <text @click="onKeyBoardPress" data-text="港">港</text>
          <text @click="onKeyBoardPress" data-text="澳">澳</text>
          <text @click="onKeyBoardPress" data-text="警">警</text>
          <text @click="onKeyBoardPress" data-text="领">领</text>
          <text @click="onKeyBoardPress" data-text="使">使</text>
          <text @click="onKeyBoardPress" data-text="学">学</text>
          <text @click="onKeyBoardPress" data-text="临">临</text>
          <text class="normalWidth delete" @click="delCarlicense">
            <img src="../../static/images/del.png" alt />
          </text>
        </view>
        <view v-else class="keyboard_content">
          <text @click="onKeyBoardPress" data-text="1">1</text>
          <text @click="onKeyBoardPress" data-text="2">2</text>
          <text @click="onKeyBoardPress" data-text="3">3</text>
          <text @click="onKeyBoardPress" data-text="4">4</text>
          <text @click="onKeyBoardPress" data-text="5">5</text>
          <text @click="onKeyBoardPress" data-text="6">6</text>
          <text @click="onKeyBoardPress" data-text="7">7</text>
          <text @click="onKeyBoardPress" data-text="8">8</text>
          <text @click="onKeyBoardPress" data-text="9">9</text>
          <text @click="onKeyBoardPress" data-text="0">0</text>
          <text @click="onKeyBoardPress" data-text="Q">Q</text>
          <text @click="onKeyBoardPress" data-text="W">W</text>
          <text @click="onKeyBoardPress" data-text="E">E</text>
          <text @click="onKeyBoardPress" data-text="R">R</text>
          <text @click="onKeyBoardPress" data-text="T">T</text>
          <text @click="onKeyBoardPress" data-text="Y">Y</text>
          <text @click="onKeyBoardPress" data-text="U">U</text>
          <text @click="onKeyBoardPress" data-text="I">I</text>
          <text @click="onKeyBoardPress" data-text="O">O</text>
          <text @click="onKeyBoardPress" data-text="P">P</text>
          <text @click="onKeyBoardPress" data-text="A">A</text>
          <text @click="onKeyBoardPress" data-text="S">S</text>
          <text @click="onKeyBoardPress" data-text="D">D</text>
          <text @click="onKeyBoardPress" data-text="F">F</text>
          <text @click="onKeyBoardPress" data-text="G">G</text>
          <text @click="onKeyBoardPress" data-text="H">H</text>
          <text @click="onKeyBoardPress" data-text="J">J</text>
          <text @click="onKeyBoardPress" data-text="K">K</text>
          <text @click="onKeyBoardPress" data-text="L">L</text>
          <text class="change" @click="changeKeyBoard">ABC</text>
          <text @click="onKeyBoardPress" data-text="Z">Z</text>
          <text @click="onKeyBoardPress" data-text="X">X</text>
          <text @click="onKeyBoardPress" data-text="C">C</text>
          <text @click="onKeyBoardPress" data-text="V">V</text>
          <text @click="onKeyBoardPress" data-text="B">B</text>
          <text @click="onKeyBoardPress" data-text="N">N</text>
          <text @click="onKeyBoardPress" data-text="M">M</text>
          <text class="delete" @click="delCarlicense">
            <img src="../../static/images/del.png" alt />
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "keyBoard",
  props: {
    showKeyBoard: {
      type: Boolean,
      required: true,
    },
    showCNKeyBoard: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    onKeyBoardPress(e) {
      const { text } = e.target.dataset;
      this.$emit("key-press", text);
    },
    changeKeyBoard() {
      this.$emit("change-press");
    },
    delCarlicense() {
      this.$emit("del-press");
    },
    inputComplete() {
      this.$emit("input-over");
    },
    clearInput() {
      this.$emit("clear-press");
    },
  },
};
</script>

<style scoped lang="less">
.keyBoardContainer {
  font-family: PingFangSC-Regular, sans-serif;
  color: #030303;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 470rpx;
  background-color: #e3e2e7;
  -webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  .handleBtn {
    display: block;
    position: absolute;
    top: 0;

    font-size: 30rpx;
    line-height: 70rpx;
    color: #0078ff;
  }
  .complete {
    right: 20rpx;
  }

  .clearInput {
    left: 20rpx;
  }
  .keyboard {
    position: relative;
    background: rgb(206, 213, 221);
    margin-top: 70rpx;
  }

  .keyboard_content {
    display: flex;
    justify-content: center;
    flex-flow: row;
    flex-wrap: wrap;
    // padding-bottom: 10rpx;
    padding: 15rpx 0 25rpx;
  }

  .keyboard_content text {
    display: block;
    text-align: center;
    width: 66rpx;
    height: 84rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    background: white;
    margin: 4rpx 5rpx;
    border-radius: 10rpx;
    box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.35);
  }

  .keyboard_content .change,
  .keyboard_content .delete {
    font-size: 30rpx;
    width: 12%;
    background: #abb3bd;
  }

  .keyboard_content .normalWidth {
    width: 70rpx;
  }

  .keyboard_content .delete img {
    width: 38rpx;
    height: 30rpx;
  }
}
</style>
